<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>


<script language="JavaScript">
$(function() {
	$.remoteForm('editOwnerForm')
	$.remoteForm('addPetForm')
});  
</script>

<h2>Owner Information</h2>
  <table>
    <tr>
      <th>Name</th>
      <td><b>${owner.firstName} ${owner.lastName}</b></td>
    </tr>
    <tr>
      <th>Address</th>
      <td>${owner.address}</td>
    </tr>
    <tr>
      <th>City</th>
      <td>${owner.city}</td>
    </tr>
    <tr>
      <th>Telephone </th>
      <td>${owner.telephone}</td>
    </tr>
  </table>
  <table class="table-buttons">
    <tr>
      <td colspan="2" align="center">
        <form method="GET" id="editOwnerForm" action="<c:url value="/editOwner.do"/>">
          <input type="hidden" name="ownerId" value="${owner.id}"/>
          <p class="submit"><input type="submit" value="Edit Owner"/></p>
        </form>
      </td>
      <td>
        <form method="GET" id="addPetForm"  action="<c:url value="/addPet.do"/>" name="formAddPet">
          <input type="hidden" name="ownerId" value="${owner.id}"/>
          <p class="submit"><input type="submit" value="Add New Pet"/></p>
        </form>
      </td>
    </tr>
  </table>

  <h2 id='afterMe'>Pets and Visits </h2>

  <c:forEach var="pet" items="${owner.pets}" varStatus="status">
   <c:set var="index" value="${status.index}"/>
      <div id="petAndVisitDiv_${index}" class='replaceMe'>
         <%@ include file="/WEB-INF/jsp/petAndVisit_.jsp" %>
      </div>
  </c:forEach>
  
<%@ include file="/WEB-INF/jsp/footer.jsp" %>
